import React from 'react';
import {Form, Input, Select, DatePicker, FormInstance} from 'antd';
import {ColumnsConfig} from "../components/AntdCrud";

interface AutoSearchFormProps<T = any> {
    columnsConfig: ColumnsConfig<T>;
    onSearch: (values: Record<string, any>) => void;
    initialValues?: Record<string, any>;
    loading?: boolean;
    form: FormInstance;
}

const AutoSearchForm: React.FC<AutoSearchFormProps> = ({
                                                           columnsConfig,
                                                           onSearch,
                                                           initialValues = {},
                                                           form,
                                                       }) => {

    // 提交查询
    const handleFinish = (values: Record<string, any>) => {
        onSearch(values);
    };

    // 渲染表单项
    const renderFormItem = (column: ColumnsConfig[0]) => {
        if (!column.supportSearch) return null;

        const { dataIndex, title, form, dict } = column;

        // 根据配置类型渲染不同的表单控件
        switch (form?.type) {
            case 'input':
            case 'text':
                return (
                    <Form.Item name={dataIndex} label={title as string}>
                        <Input placeholder={`请输入${title}`} allowClear />
                    </Form.Item>
                );

            case 'select':
                return (
                    <Form.Item name={dataIndex} label={title as string}>
                        <Select
                            placeholder={`请选择${title}`}
                            allowClear
                            mode={form?.attrs?.mode}
                            options={dict?.options || []}
                            showSearch
                            filterOption={(input, option) =>
                                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                            }
                        />
                    </Form.Item>
                );

            case 'date':
            case 'datetime':
                return (
                    <Form.Item name={dataIndex} label={title as string}>
                        <DatePicker
                            style={{ width: '100%' }}
                            placeholder={`请选择${title}`}
                            showTime={form?.type === 'datetime'}
                        />
                    </Form.Item>
                );

            default:
                return (
                    <Form.Item name={dataIndex} label={title as string}>
                        <Input placeholder={`请输入${title}`} allowClear />
                    </Form.Item>
                );
        }
    };

    return (
        <Form
            form={form}
            layout="inline"
            initialValues={initialValues}
            onFinish={handleFinish}
        >
            {/* 渲染所有支持搜索的字段 */}
            {columnsConfig
                .filter(column => column.supportSearch)
                .map(column => (
                    <React.Fragment key={column.dataIndex as string}>
                        {renderFormItem(column)}
                    </React.Fragment>
                ))}
        </Form>
    );
};

export default AutoSearchForm;